<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../../../css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../../../js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../../../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <script src="../../../layui/layui.js"></script>

    <style>
        #content > div {
            float: left;
            margin: 20px;
        }
    </style>
</head>

<body>
<div style="padding:0px; margin:0px;">
    <ul class="breadcrumb" style="  margin:0px; ">
        <li><a href="#">系统管理</a></li>
        <li>权限变更</li>
    </ul>
    <form action="" class="form-horizontal">

        <h5 class="page-header alert-info" style="padding:10px; margin:0px; margin-bottom:5px;">基本信息</h5>
        <div class="row">
            <div class="col-sm-5">
                <div class="form-group">
                    <label class="col-sm-3 control-label">角色编号</label>
                    <div class="col-sm-9">
                        <p class="form-control-static" id="rid">10001</p>
                    </div>
                </div>

            </div>
            <div class="col-sm-5">
                <div class="form-group">
                    <label class="col-sm-3 control-label">角色名称</label>
                    <div class="col-sm-9">
                        <p class="form-control-static" id="rname">超级管理员</p>
                    </div>
                </div>
            </div>

        </div>
        <h5 class="page-header alert-info" style="padding:10px; margin:0px; margin-bottom:5px;">菜单信息</h5>

        <div id="content">

        </div>


        <div class="row">
            <div class="col-sm-5 col-sm-offset-4">
                <input type="submit" class="btn btn-success" value="权限变更"/>
                <a href="anthorty_changelist.html" class="btn btn-warning">返回上一级</a>

            </div>
        </div>

    </form>
</div>

<script>

    $(function () {
        if (parent.select_role_obj) {
            $("#rid").html(parent.select_role_obj.roleId)
            $("#rname").html(parent.select_role_obj.roleName)
        }
    })
    layui.use(['transfer', 'layer', 'util'], function () {
        var $ = layui.$
            , transfer = layui.transfer
            , layer = layui.layer
            , util = layui.util;


        $.post("RoleAnthorityAJAXServlet.do?method=data",{rid:parent.select_role_obj.roleId}, function (data) {
            var childrens = data.tree.children;
            let content = $("#content");
            for (let i = 0; i < childrens.length; i++) {
                content.append("<div></div>")
            }

            var div_children = content.children();
            for (let i = 0; i < div_children.length; i++) {
                initTransfer(data.echo,childrens[i], div_children[i])
            }

        }, "json")


        /**
         * 创建穿梭框
         */
        function initTransfer(values,data, elem) {
            //渲染
            transfer.render({
                elem  //绑定元素
                , showSearch: true
                , data: data.children
                , id: "RA" //定义索引
                , value: values
                , title: [data.title, "拥有的权限"]
                , parseData: function (res) {
                    return {
                        "value": res.anthortyId //数据值
                        , "title": res.title //数据标题
                        , "anthortyPid": res.anthortyPid
                        , "disabled": res.disabled  //是否禁用
                        , "checked": res.checked //是否选中
                    }
                }
                , onchange: function (data, index) {
                    console.log(data); //得到当前被穿梭的数据
                    console.log(index); //如果数据来自左边，index 为 0，否则为 1
                    if (index == 0) {
                        layer.msg("授权")
                            $.post("RoleAnthorityAJAXServlet.do?method=grant", {
                               data:JSON.stringify(data),
                                rid:parent.select_role_obj.roleId
                            })

                    } else {
                        layer.msg("撤销授权")
                            $.post("RoleAnthorityAJAXServlet.do?method=revocation", {
                                data:JSON.stringify(data),
                                rid: parent.select_role_obj.roleId
                            }, function (data) {

                            })
                    }
                }
            });
        }


    })
</script>

</body>
</html>
